<template>
	<view class="blood-bar-edit" :class="{'focus' : in_focus}">
		<view class="left">
			<uni-forms-item label="标题:" :labelWidth="45" class="inp-item">
				<uni-easyinput type="text" placeholder="请输入标题" :maxlength="6" :value="title" style="width: 85px;" :styles="inputStyle" :clearable="false" @input="titleChanged"/>
			</uni-forms-item>
			<uni-forms-item label="X:" :labelWidth="20" class="inp-item">
				<uni-easyinput type="number" :value="locationX" textAlign="center" style="width: 55px;" :styles="inputStyle" :clearable="false" @input="xChanged"/>
			</uni-forms-item>
			<uni-forms-item type="number" label="Y:" :labelWidth="20" class="inp-item">
				<uni-easyinput type="number" :value="locationY" textAlign="center" style="width: 55px;" :styles="inputStyle" :clearable="false" @input="yChanged"/>
			</uni-forms-item>
			<uni-forms-item label="大小:" :labelWidth="45" class="inp-item">
				<uni-easyinput type="number" :maxlength="3" :value="scale" textAlign="center" style="width: 55px;" :styles="inputStyle" :clearable="false" @input="scaleChanged"/>
			</uni-forms-item>
			
			<uni-forms-item label="透明度:" :labelWidth="60" class="inp-item">
				<uni-easyinput type="number" :maxlength="3" :value="opacity" textAlign="center" style="width: 55px;" :styles="inputStyle" :clearable="false" @input="opacityChanged"/>
			</uni-forms-item>
			
			<uni-forms-item label="间隔:" :labelWidth="45" class="inp-item">
				<uni-easyinput type="number" :value="space" textAlign="center" style="width: 55px;" :styles="inputStyle" :clearable="false" @input="spaceChanged"/>
			</uni-forms-item>
		</view>
		
		<button type="warn" size="mini" style="margin-right: 20px;" @click="del">删除</button>
		
	</view>
</template>

<script>
	export default {
		name:"blood-bar-edit",
		props: {
			in_focus: {
				type: Boolean,
				default: false
			},
			componentInfo: {
				type: Object,
				default: null
			}
		},
		data() {
			return {
				inputStyle: {
					color: '#b3b3de',
					backgroundColor: '#73738f',
					disableColor: '#383846',
					borderColor: '#8e8eb0'
				},
				locationX: 0,
				locationY: 0,
				scale: 0,
				opacity: 100,
				space: 50
			}
		},
		created() {
			this.locationX = this.componentInfo.x
			this.locationY = this.componentInfo.y
			this.scale = parseInt(this.componentInfo.scale * 100)
			this.opacity = parseInt(this.componentInfo.opacity * 100)
			this.space = this.componentInfo.space
			this.title = this.componentInfo.title
		},
		watch: {
			componentInfo(newVal) {
				this.locationX = newVal.x
				this.locationY = newVal.y
				this.scale = parseInt(newVal.scale * 100)
				this.opacity = parseInt(newVal.opacity * 100)
				this.space = newVal.space
				this.title = newVal.title
			}
		},
		
		methods: {
			
			xChanged(e) {
				this.$emit('positionChanged', {
					x: e,
					y: this.locationY
				})
			},
			
			yChanged(e) {
				this.$emit('positionChanged', {
					x: this.locationX,
					y: e
				})
			},
			
			scaleChanged(e) {
				this.scale = e
				if (e < 0) {
					this.scale = 0
				}
				this.$emit('scaleChanged', this.scale / 100.0)
			},
			
			opacityChanged(e) {
				this.opacity = e
				if (e < 0) {
					this.opacity = 0
				}
				if (e > 100) {
					this.opacity = 100
				}
				this.$emit('opacityChanged', this.opacity / 100.0)
			},
			
			spaceChanged(e) {
				this.space = e
				if (e < 0) {
					this.space = 0
				}
				this.$emit('spaceChanged', this.space)
			},
			
			titleChanged(e) {
				this.title = e
				this.$emit('titleChanged', this.title)
			},
			
			del() {
				this.$emit('del')
			}
		}
	}
</script>

<style scoped>
	
	.blood-bar-edit {
		width: 100%;
		height: 80px;
		background-color: #4b4b5d;
		border: #73738f 1px solid;
		border-radius: 3px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	
	.left {
		display: flex;
		align-items: center;
		height: 100%;
		width: 1px;
		flex: 1;
		margin-left: 10px;
	}
	
	.focus {
		border-color: #fc2a75;
	}
	
	.inp-item {
		color: #8e8eb0; 
		margin-left: 10px;
		margin-right: 10px;
	}
	
</style>